<template>

  <el-card style="margin:20px 0;">
    <!--  标签页-->
    <!-- 表格操作 -->
    <!--      搜索框-->
    <div style="float: left; margin-bottom: 15px;">

      <div style="margin: 0; padding: 0" >

        <div style="border: 1px solid #ccc; margin-top: 15px; margin-bottom: 20px" >

          <Toolbar
              style="border-bottom: 1px solid #ccc;"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
          />
          <Editor
              :style="{'width': editorWidth + 'px', 'height': '500px',  'overflow-y': 'hidden'}"
              v-model="html"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
              @onChange="editorChange"
          >

          </Editor>

        </div>
        <div slot="footer" class="dialog-footer"
             style="margin-bottom: 5px; "
             align="center">
          <el-popconfirm title="确定清空吗？" @confirm="clearHtml()">
            <el-button size="small"  slot="reference" style="margin-left: 3px" >
              清 空
            </el-button>
          </el-popconfirm>

          <el-popconfirm
              title="确定保存内容吗？"
              @confirm="saveHtml()"
          >
            <el-button size="small" type="primary" slot="reference"
                       style="margin-left: 10px" >保 存</el-button>
          </el-popconfirm>

        </div>
      </div>

    </div>


  </el-card>
</template>

<script>
import Vue from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
export default {
  components: {Editor, Toolbar},
  data() {
    return {
      /*表格第一行*/
      headerBg: "headerBg",
      loading: false,

      windowsWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,//兼容性获取屏幕高度
      /*wangEditor*/
      editor: null,
      html: '',
      currentHtml:{},


      toolbarConfig: {
        excludeKeys:[
          'group-video'
        ]},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage:{
            server: process.env.VUE_APP_SERVER + '/doc-content/upload-picture',
            fieldName: 'picFile',

            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 5 * 1024 * 1024, // 1M

            // 自定义插入图片
            customInsert(res, insertFn) {
              insertFn(res.data);
            },
          }
        }

      },
      mode: 'default', // or 'simple default'
      editorWidth: 500,
      nationDetailDTO:{},

      nation:{},
    }

  },


  watch: {
    windowsWidth: {
      immediate: true,
      handler: function (newVal) {
        if (newVal >= 500 + 295) {
          this.editorWidth = newVal - 295;
        } else {
          this.editorWidth = 500;
        }

      }
    },
  },

  mounted() {
    window.onresize = () => {
      return (() => {
        this.windowsWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      })()
    }

  },

  created() {
    this.nation = this.$route.query;
    this.getNationDetail()

  },

  beforeDestroy() {
    const editor = this.editor
    if (editor == null)return
    editor.destroy()

  },



  methods: {

    checkEditor(){


    },

    editorChange() {

    },

    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      // editor.disable();

    },

    clearHtml(){
      this.html = '';
    },

    saveHtml(){
      this.nationDetailDTO.nationId = this.nation.id;
      this.nationDetailDTO.content = this.editor.getHtml();

      if(this.currentHtml.length == 0){
        this.axios.post("/nation-detail/insert-doc-content",this.nationDetailDTO).then(({data}) => {
          if (data.state == 20000) {
            this.currentHtml = data.data;
            const loading = this.$loading({
              lock: true,
              text: '插入中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
              loading.close();
              this.$message.success(data.message);
            }, 1000);
          } else {
            this.$message.error(data.message);
          }
        });
      }else{
        this.nationDetailDTO.id = this.currentHtml.id;
        console.log("修改数据");
        this.axios.post("/nation-detail/update-by-key",this.nationDetailDTO).then(({data}) => {
          if (data.state == 20000) {

            const loading = this.$loading({
              lock: true,
              text: '修改中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
              loading.close();
              this.$message.success(data.message);

            }, 1000);
          } else {
            this.$message.error(data.message);
          }
        });
      }

    },


    getNationDetail(){
      this.axios.get("/nation-detail/get-list-by-example?nationId="+this.nation.id).then(({data}) => {
        if (data.state == 20000) {
          this.html = data.data.content;
          this.currentHtml = data.data;
        } else {
          this.$message.error(data.message);
        }
      });
    },


  },


}
</script>

<style src="@wangeditor/editor/dist/css/style.css">


.el-input__inner::placeholder {
  color: #676767;

}


.headerBg {
  background: #eee !important;
}

.el-dialog__body {
  padding: 0px 20px;
  color: #606266;
  font-size: 16px;
  word-break: break-all;

}

.menu[data-v-e3a2c392] {
  padding: 0;
}
</style>
